<!-- 结算清单 -->
<template>
  <div class="settlement-list-dialog">
    <el-dialog
      width="910px"
      class=""
      top="6vh"
      title="结算清单"
      :visible="$store.state.dialog.settlementList"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="order" res="order" size="mini">
              <el-row>
                <el-col :span="19">
                  <el-form-item>
                    <el-select size="mini" @change="changeList" v-model="order.settlementState">
                      <el-option label="未结清" value="0"></el-option>
                      <el-option label="全部" value="1"></el-option>
                      <el-option label="产生结算" value="2"></el-option>
                      <el-option label="结清" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input v-model="order.searchCon" @input="getSettlementList(1, 15)" placeholder="搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              border
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.5)"
              max-height="600px"
              :data="settlementlistData"
              style="width: 100%">
              <!-- <el-table-column
                align="center"
                width="110"
                prop="type"
                label="类型">
              </el-table-column> -->
              <el-table-column
                align="center"
                width="110"
                prop="CompanyName"
                label="用箱人">
              </el-table-column>
              <el-table-column
                align="center"
                width="110"
                prop="createTime"
                label="结算日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="startTime"
                width="100"
                label="开始日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="endTime"
                width="100"
                label="结束日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ysMoney"
                label="应收金额">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ssMoney"
                label="实收金额">
              </el-table-column>
              <el-table-column
                align="center"
                prop="wfMoney"
                label="未付金额">
              </el-table-column>
              <el-table-column
                align="center"
                label="状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state === '0'" size="medium" effect="dark">未结清</el-tag>
                  <el-tag v-if="scope.row.state === '1'" size="medium" effect="dark">全部</el-tag>
                  <el-tag v-if="scope.row.state === '2'" size="medium" effect="dark">产生结算</el-tag>
                  <el-tag v-if="scope.row.state === '3'" size="medium" effect="dark">结清</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" icon="el-icon-tickets" @click="handeInfo(scope.row.settlementFeeId)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="salesman-man-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-sizes="[15, 20, 30]"
                :page-size="number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 详细信息 -->
    <details-dialog :settlementFeeId="settlementFeeId" :customerid2="customerid2"></details-dialog>
  </div>
</template>

<script>
import {
  settlementDetailedList
} from '../../api/finance'
import DetailsDialog from './DetailsDialog'
export default {
  components: {
    DetailsDialog
  },
  data () {
    return {
      order: {
        settlementState: '0',
        searchCon: '' // 搜索
      },
      pageNo: 1,
      number: 15,
      total: 0,
      settlementFeeId: '',
      loading: true,
      settlementlistData: []
    }
  },
  watch: {
    '$store.state.dialog.settlementList' (value) {
      if (value) {
        this.getSettlementList(1, 15)
      }
    }
  },
  props: {
    customerid2: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_settlement_list_dialog')
    },
    // 获取结算清单
    async getSettlementList (pg, nb) {
      const res = await settlementDetailedList({
        customerId: this.customerid2, // 客户编号 空代表所有客户
        settlementState: this.order.settlementState, // 结算状态 0 未结清 1 全部 2 产生结算 3 结清
        curpage: pg, // 页码
        pageSize: nb, // 页数
        searchCon: this.order.searchCon // 搜索条件
      })
      if (res.status === 200) {
        this.settlementlistData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    handeInfo (id) {
      this.settlementFeeId = id
      console.log(id, 'settlementFeeId1111')
      this.$store.commit('show_details_dialog')
    },
    changeList () {
      this.getSettlementList(1, 15)
    },
    handleCurrentChange (val) {
      this.getSettlementList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getSettlementList(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style scoped lang="less">

</style>
